<template>
  <div class="video_ls" v-loading="vidoeList.loading">
    <div class="i_vidioI">
      <span>{{ vidoeList.recorder_class_name }}</span>
      <el-select v-if="parseInt(vidoeList.type) !== 3 && parseInt(vidoeList.type) !== 4" style="width:130px;"
        @change="selectChange()" filterable v-model="vidoeList.recorder_status" placeholder="请选择">
        <el-option v-for="item in vidoeList.opArr" :key="item.code" :label="item.txt" :value="item.code"></el-option>
      </el-select>
    </div>
    <a class="i_vidioLk" @click="videoLink()"><i>进入播放</i></a>
    <!-- <flvPlayer v-if="playerOption.url" :id="`playerId${domId}`" :playerOption.sync="playerOption"></flvPlayer> -->
    <!-- && !webrtc <webRtcPlayer :uid="`${domId}`"
                  v-else-if="webrtc"
                  :url="listData[0].webrtc_url"></webRtcPlayer> -->
    <flvdplayer ref="flvDplayer"  v-if="isExist && playerOption.url" :id="`playerId${domId}`" :playerOption.sync="playerOption" ></flvdplayer>
    <img v-else src="../../../../static/image/image_mingshi_bg3.png" alt="">
  </div>
</template>

<script>
import webRtcPlayer from '@/components/common/webrtcPlayer'
import flvdplayer from '@/components/public/flvdplayerX'
// import flvPlayer from '@/components/common/cast-flv'
// import flvPlayer from '../../public/flvPlayer'
export default {
  props: ['listData', 'liveUrl', ],
  components: {
    // flvPlayer,
    webRtcPlayer,
    flvdplayer

  },
  data() {
    return {
      domId: 0,
      stayLoadingInx: [], //持续加载的设备的下标数组，配合定时器
      stayLoadingTimeOut: {},
      typeArr: {
        0: '0620',
        1: '0600B',
        2: '0650',
        3: 'rtmp',
        4: 'rtsp',
        5: '奥威亚',
        6: '网动',
        7: '中庆',
        8: '锐取',
        9: '0683',
        10: '0660',
      },
      operateCommonArr: {
        0: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [2, 3, 4, 5, 6, 7],
          '直播中': [1, 3, 4, 5, 6, 7],
          '录制中': [1, 2, 5, 6, 7],
          '停止': [1, 2, 3, 6, 7],
        },
        1: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [22, 21, 8],
          '停止': [20, 8],
        },
        2: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [9, 11, 12, 13],
          '停止': [10, 13],
          '已暂停': [10, 12, 13],
        },
        9: {
          '不在线': [],
          '在线': [],
        },
        10: {
          '无法连接': [],
          '无法识别': [],
          '录播中': [25, 27, 28],
          '停止': [26],
          '已暂停': [26, 28],
        },
      },
      operateArr: {
        0: '尝试开机',
        4: '预览',
        1: '录播',
        2: '直播',
        3: '录制',
        5: '停止',
        6: '重启',
        7: '关机',
        22: '预览',
        20: '录播',
        21: '停止',
        8: '高级配置界面',
        14: '唤醒',
        /*9:'预览',*/ 10: '录播',
        11: '暂停',
        12: '停止' /*,13:'高级配置界面'*/,
        15: '软关机',
        25: '预览',
        26: '录播',
        27: '暂停',
        28: '停止',
      },
      playerOption: {
        type: 'flv',
        url: '',
        status_stream: true,
        status_stream_audio: true,
      },
      checkMuiltOP: [],
      vidoeList: [],
      isExist: true
    }
  },
  computed: {
    webrtc() {
      return this.$store.getters.isSupportWebRtc
    },
    allownine() {
      return this.$store.getters.isAllowNine
    },
  },
  mounted() {
    this.stayLoadingTimeOut = setInterval(() => {
      this.checkStayLoading()
    }, 15000)
    this.vidoeList = this.listData[0]
  },
  beforeDestroy() {
    // this.player && this.player.dispose();
    // debugger
    this.$refs.flvDplayer.destory();
    console.log('销毁video', this.isExist)
    this.stayLoadingTimeOut && clearInterval(this.stayLoadingTimeOut)
    this.stayLoadingTimeOut = null
  },
  watch: {
    listData: {
      handler(nn) {
        // console.log(nn, '预览地址')
        if (!is_empty(nn[0]) && nn[0].preview) {
          this.vidoeList = nn[0]
          this.playerOption.url = nn[0].play_url
          this.playerOption.status_stream =
            nn[0].status_stream == '1' ? true : false
          this.playerOption.status_stream_audio =
            nn[0].status_stream_audio == '1' ? true : false
          this.domId = nn[0].id
        } else {
          this.playerOption.url = ''
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    videoLink(id) {
      this.$router.push(
        '/affairs/inspection/classroom-play/' + this.vidoeList.id
      )
    },
    //异步加载设备状态
    getRecorderStatus(inx) {
      this.listData[inx].watchUpdateStatus = false
      this.listData[inx].loading = true
      this.listData[inx].opArr = []
      let success = (data) => {
        if (!is_empty(this.operateCommonArr[this.listData[inx].type][data.data._STATUS]) && this.operateCommonArr[this.listData[inx].type][data.data._STATUS].length > 0) {
          for (var i = this.operateCommonArr[this.listData[inx].type][data.data._STATUS].length - 1; i >= 0; i--) {
            var op = {
              code: this.operateCommonArr[this.listData[inx].type][data.data._STATUS][i],
              txt: this.operateArr[this.operateCommonArr[this.listData[inx].type][data.data._STATUS][i]],
            }
            if (!is_empty(op.code) && !is_empty(op.txt)) {
              this.listData[inx].opArr.push(op)
            }
            // op = { code : 0 , txt : '' };
          }
        }
        //添加当前状态
        this.listData[inx].opArr.unshift({ code: -1, txt: data.data._STATUS })
        if (!is_empty(data.data._STATUS) && data.data._STATUS == '停止') {
          this.listData[inx].opArr.push({ code: 15, txt: this.operateArr[15] })
        } else if (is_empty(data.data._STATUS) && data.data._STATUS == '录播') {
          this.listData[inx].opArr = []
          this.listData[inx].opArr.push({ code: 14, txt: this.operateArr[14] })
          this.listData[inx].opArr[0] = { code: -1, txt: '关机状态' }
        }
        if (parseInt(this.listData[inx].type) === 0 && data.data._STATUS == '无法连接') {
          this.listData[inx].opArr.splice(1, 0, { code: 0, txt: this.operateArr[0] })
        }
        //下拉第一个选项作为当前状态
        this.listData[inx].recorder_status = -1
        if (in_array(inx, this.stayLoadingInx, 'inx')) {
          //正常获取到状态
          if (!(data.data._STATUS == '无法连接' || data.data._STATUS == '无法识别' || data.data._STATUS == '不在线')) {
            let s_inx = -1
            for (var i = this.stayLoadingInx.length - 1; i >= 0; i--) {
              if (inx === this.stayLoadingInx[i].inx) {
                s_inx = i
                break
              }
            }
            if (s_inx >= 0) {
              this.stayLoadingInx.splice(s_inx, 1)
              this.listData[inx].loading = false
            }
          }
        } else {
          this.listData[inx].loading = false
        }
      }
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get('api/recorder/recorder_status', {
        params: { id: this.listData[inx].id },
        func: { success: success },
      })
    },
    selectChange() {
      var inx = 0
      var code = this.vidoeList.recorder_status
      this.recorderTransfer(inx, code)
    },
    //如果开机或重启超过4分钟将不会再持续获取设备状态
    checkStayLoading() {
      if (this.stayLoadingInx.length > 0) {
        for (var i = this.stayLoadingInx.length - 1; i >= 0; i--) {
          let inx = this.stayLoadingInx[i].inx
          if (Number(new Date()) - this.stayLoadingInx[i].times > 240 * 1000) {
            this.stayLoadingInx.splice(i, 1)
          }
          this.getRecorderStatus(inx)
        }
      }
    },
    //设备操作转发
    recorderTransfer(inx, code) {
      if (parseInt(this.listData[inx].type) === 0) {
        this.$message.warning('该功能未开发')
        //this.change0620A(inx,code);
      } else if (parseInt(this.listData[inx].type) === 2) {
        this.change0650(inx, code)
      } else if (parseInt(this.listData[inx].type) === 1) {
        this.$message.warning('该功能未开发')
      } else if (parseInt(this.listData[inx].type) === 10) {
        //this.$message.warning('该功能未开发')
        this.change0660(inx, code)
      }
    },
    change0650(inx, code) {
      switch (code) {
        case 0:
          //关闭某个窗口
          break
        case 9:
          //预览
          this.getRecorderStatus(inx)
          break
        case 10:
        case 11:
        case 12:
          if (this.checkTimeFast(this.listData[inx].ip)) {
            this.getRecorderStatus(inx)
            this.$message.warning('对该设备操作过于频繁')
            return false
          }
          this.listData[inx].loading = true
          var rec_type = code - 9
          var success = (data) => {
            if (data.data['Result'] == null || data.data['Result'] != 1) {
              this.$message.error('指令执行失败，录播主机错误！')
            }
            this.getRecorderStatus(inx)
          }
          var fail = (data) => {
            this.$message.error(data.msg)
            this.getRecorderStatus(inx)
          }
          var param = {
            ip: this.listData[inx].ip,
            code: 30010,
            RecType: rec_type,
            RoomName: '0650',
            TeacherName: '管理员',
            CourseName: 'C',
            Notes: '管理员录制',
          }
          this.$ajax.post('api/recorder/control_0650', param, {
            func: { success: success, fail: fail },
          })

          break
        case 13:
          //高级界面配置
          break
        case 14:
        case 15:
          if (code == 14) {
            // 尝试开机
            var Status = 1
          } else {
            // 关机
            var Status = 0
          }
          this.listData[inx].loading = true
          var success = (data) => {
            if (
              typeof data.data['Result'] != 'undefined' &&
              (data.data['Result'] == null || data.data['Result'] != 1)
            ) {
              this.$message.error('指令执行失败，录播主机错误！')
            } else {
              if (code == 14) {
                if (!in_array(inx, this.stayLoadingInx, 'inx')) {
                  this.stayLoadingInx.push({
                    inx: inx,
                    times: Number(new Date()),
                  })
                }
              }
            }
            this.getRecorderStatus(inx)
          }
          var fail = (data) => {
            this.$message.error(data.msg)
            this.getRecorderStatus(inx)
          }
          var param = {
            id: this.listData[inx].id,
            code: 30089,
            OptType: 1,
            Status: Status,
            PassKey: 'DirectSdk',
          }
          this.$ajax.post('api/recorder/control_0650', param, {
            func: { success: success, fail: fail },
          })
          break
        default:
          break
      }
    },
    change0660(inx, code) {
      switch (code) {
        case 25:
          //预览
          // this.getRecorderStatus(inx);
          // this.videoView(this.listData[inx].id);
          this.videoLink(this.listData[inx].id)
          break
        case 26:
        case 27:
        case 28:
          this.listData[inx].loading = true
          var rec_type = code - 25
          var success = (data) => {
            if (
              typeof data.data['MsgHead'] != 'undefined' &&
              typeof data.data['MsgHead']['Result'] != 'undefined' &&
              (data.data['MsgHead']['Result'] == null ||
                data.data['MsgHead']['Result'] != 1)
            ) {
              this.$message.error('指令执行失败，录播主机错误！')
            }

            setTimeout(() => {
              this.getRecorderStatus(inx)
            }, 2000)
          }
          var fail = (data) => {
            this.$message.error(data.msg)
            this.getRecorderStatus(inx)
          }
          var param = {
            id: this.listData[inx].id,
            ip: this.listData[inx].ip,
            code: 30010,
            RecType: rec_type,
            RoomName: '0660',
            TeacherName: '管理员',
            CourseName: 'C',
            Notes: '管理员录制',
          }
          this.$ajax.post('api/recorder/control_0660', param, {
            func: { success: success, fail: fail },
          })

          break

        default:
          break
      }
    },
    //检测是否频繁操作
    checkTimeFast(ip) {
      var ipColumn =
        this.checkMuiltOP.length > 0
          ? getOneColumn(this.checkMuiltOP, 'ip')
          : []
      var inx = ipColumn.indexOf(ip)
      if (inx > -1) {
        if (Date.parse(new Date()) - this.checkMuiltOP[inx].timeout < 10000) {
          return true
        } else {
          this.checkMuiltOP[inx].timeout = Date.parse(new Date())
        }
      } else {
        this.checkMuiltOP.push({
          ip: ip,
          timeout: Date.parse(new Date()),
        })
      }
      return false
    },
  },
}
</script>

<style lang="scss">
.video_ls {
  width: 100%;
  height: 100%;
  position: relative;

  >img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }

  .vjs-custom-skin>.video-js .vjs-big-play-button {
    border-radius: 50%;
    width: 70px;
    // height: 3em !important;
    // line-height: 3em !important;
  }

  .video-player,
  .video-js {
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  &:hover {

    .i_vidioI,
    .i_vidioLk {
      opacity: 1;
      visibility: visible;
    }
  }
}

.i_vidioI {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  background: rgba(0, 0, 0, 0.3);
  text-align: justify;
  text-align-last: justify;
  color: #ffffff;
  font-size: 12px;
  z-index: 4;
  padding: 15px 2%;
  visibility: hidden;
  // opacity: 0;
  transition: 0.5s;

  >span {
    text-align-last: initial;
    text-align: left;
    display: inline-block;
  }

  select {
    border: #ffffff;
    background: #2a2e31;
    color: #ffffff;
  }
}

.i_vidioLk {
  display: block;
  position: absolute;
  width: 100%;
  height: 88%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 3;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
  text-align-last: inital;
  text-align: center;

  >i {
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    cursor: pointer;
    display: inline-block;
  }
}

.i_vidioLk+div {
  width: 100%;
  height: 100%;
  overflow: hidden;

  >div {
    padding-top: 0 !important;
  }
}
</style>
